<template>
	<view class="container">
		<view class="card">
			<view class="item"><view>会议主题：{{ form.topic }}</view></view>
			<view class="item"><view>演&nbsp;讲&nbsp;人&nbsp;：{{ form.host_man }}</view></view>
			<view class="item"><view>负&nbsp;责&nbsp;人&nbsp;：{{ form.respons_man }}</view></view>
			<view class="item"><view>开始时间：{{ form.starttime }}</view></view>
			<view class="item"><view>结束时间：{{ form.overtime }}</view></view>
		</view>
		<view class="card">
			<view class="title flex-row">
				<view class="name">会议相关信息：<text class="red">*</text></view>
			</view>
			<textarea v-model="meet_detail" placeholder="会议相关信息..." />
			<view class="title flex-row"><view class="name">文书照片</view></view>
			<view style="height: 140upx;">
				<upload @upload="uploadRecordPic" @delete="delRecordPic" :count="3"></upload>
			</view>
			<view class="title flex-row"><view class="name">会议结束现场照片<text class="red">*</text></view></view>
			<view style="height: 140upx;">
				<upload @upload="uploadOverPic" @delete="delOverPic" :count="3"></upload>
			</view>
			<view v-for="(item, index) in resolves" :key="index">
				<view class="title flex-row"><view class="name">会议解决内容{{ index+1 }}</view></view>
				<view class="resolves flex-row" @click="resolveDetail(item.id)" style="height: 140upx;">
					<upload :files="item.pics" :icon="false" :showBtn="false"></upload>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view @click="resolve" class="btn">会议解决内容</view>
			<view @click="over" class="btn error">结束会议</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			meet_id: '',
			meet_detail: '',
			record_pics: [],
			over_pics: [],
			handle_content: [],	// 解决办法的ID，多个用应英文逗号分隔
			resolves: [],
			form: {}
		}
	},
	onLoad(option){
		this.meet_id = option.id;
	},
	onShow(){
		this.getDetail();
		this.getResolves();
	},
	methods: {
		// 获取详情
		getDetail(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingDetail,
				data: { 
					userid: this.userid, 
					meet_id: this.meet_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.form = res.data.data;
				}
			})
		},
		// 获取解决问题
		getResolves(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingResolveList,
				data: { 
					userid: this.userid, 
					meet_id: this.meet_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.resolves = res.data.data.map(item=>{
						// 记录ID
						_this.handle_content.push(item.id);
						
						// 处理图片
						let pics = item.pics.split(',');
						item.pics = pics.map(item=>_this.$API.baseURL+item);
						return item;
					});
				}
			})
		},
		// 删除文书照片
		delRecordPic(obj){
			this.record_pics = this.record_pics.filter((item, idx)=>obj.index != idx);
		},
		// 上传文书照片
		uploadRecordPic(obj){
			let _this = this;
			obj.temps.forEach(function(item,index){
				uni.showLoading({title: '上传中'});
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						uni.hideLoading();
						res.data = JSON.parse(res.data);
						_this.record_pics.push(res.data.fileName);
					},
					fail(){
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						})
					}
				});
			})
		},
		// 删除结束照片
		delOverPic(obj){
			this.over_pics = this.over_pics.filter((item, idx)=>obj.index != idx);
		},
		// 上传结束照片
		uploadOverPic(obj){
			let _this = this;
			obj.temps.forEach(function(item,index){
				uni.showLoading({title: '上传中'});
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						uni.hideLoading();
						res.data = JSON.parse(res.data);
						_this.over_pics.push(res.data.fileName);
					},
					fail(){
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						})
					}
				});
			})
		},
		// 解决
		resolve(){
			uni.navigateTo({
				url: 'resolve?id='+this.meet_id
			})
		},
		// 内容详情
		resolveDetail(id){
			uni.navigateTo({
				url: 'resolveDetail?id='+id
			})
		},
		// 结束
		over(){
			// 数据校验：会议相关内容+结束照片必填
			if(!this.meet_detail){
				return uni.showToast({icon: 'none', title: '请输入会议相关信息'});
			}
			if(this.over_pics.length == 0){
				return uni.showToast({icon: 'none', title: '请上传会议结束现场照片'});
			}
			
			// 异步提交
			uni.showLoading({title: '加载中'});
			uni.request({
				url: this.$API.eduSafeMeetingOver,
				data: { 
					status: 3,
					meet_id: this.meet_id,
					meet_detail: this.meet_detail,
					record_pics: this.record_pics.join(','),
					over_pics: this.over_pics.join(','),
					handle_content: this.handle_content.join(',')
				},
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						});
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '操作失败'
					});
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	overflow-y: auto;
}

.red{
	color: red;
}

textarea{
	width: 100%;
	height: 160upx;
	padding: 10upx;
	font-size: 28upx;
	background: #F2F2F2;
	border-radius: 10upx;
	box-sizing: border-box;
	margin-bottom: 20upx;
}

/*列表*/
.card{
	background: #fff;
	overflow: hidden;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card:first-child{
	margin: 20upx 0 0;
	border-radius: 0;
}
.card:first-child .item{
	text-indent: 10upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.btn{
	color: #fff;
	width: 280upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 40upx auto 0;
	background-color: #1692DC;
}
.btn:last-child{
	margin-bottom: 40upx;
}
.btn.error{
	background-color: red;
}
</style>
